<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<link rel="stylesheet"
	href="LeisureSeeker/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="LeisureSeeker/css/login.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="LeisureSeeker/bootstrap/js/bootstrap.min.js"></script>

<script>
	$(document).ready(function() {
		//打开会员登录 
		$("#Login_start_").click(function() {
			alert("111");
			$("#regist_container").hide();
			$("#_close").show();
			$("#_start").animate({
				left : '350px',
				height : '520px',
				width : '400px'
			}, 500, function() {
				$("#login_container").show(500);
				$("#_close").animate({
					height : '40px',
					width : '40px'
				}, 500);
			});
		});
		//打开会员注册
		$("#Regist_start_").click(function() {
			$("#login_container").hide();
			$("#_close").show();
			$("#_start").animate({
				left : '350px',
				height : '520px',
				width : '400px'
			}, 500, function() {
				$("#regist_container").show(500);
				$("#_close").animate({
					height : '40px',
					width : '40px'
				}, 500);
			});
		});
		//关闭
		$("#_close").click(function() {

			$("#_close").animate({
				height : '0px',
				width : '0px'
			}, 500, function() {
				$("#_close").hide(500);
				$("#login_container").hide(500);
				$("#regist_container").hide(500);
				$("#_start").animate({
					left : '0px',
					height : '0px',
					width : '0px'
				}, 500);
			});
		});
		//去 注册
		$("#toRegist").click(function() {
			$("#login_container").hide(500);
			$("#regist_container").show(500);
		});
		//去 登录
		$("#toLogin").click(function() {
			$("#regist_container").hide(500);
			$("#login_container").show(500);
		});
	});
</script>
</head>

<body style="background-color: #000000;">

	<a id="Login_start_" class="btn btn-danger"
		style="width: 100px; height: 40px; border-radius: 0;">登陆</a>
	<a id="Regist_start_" class="btn btn-success"
		style="width: 100px; height: 40px; border-radius: 0;">注册</a>

	<!-- 会员登录  -->
	<!--<div id='Login_start' style="position: absolute;" >-->
	<div id='_start'>
		<div id='_close' style="display: none;">
			<span class="glyphicon glyphicon-remove"></span>
		</div>
		<br />
		<!--登录框-->
		<div id="login_container">
			<div id="lab1">
				<span id="lab_login">会员登录</span> <span id="lab_toRegist">
					&emsp;还没有账号&nbsp; <span id='toRegist'
					style="color: #EB9316; cursor: pointer;">立即注册</span>
				</span>
			</div>
			<div style="width: 330px;">
				<span id="lab_type1">手机号/账号登陆</span>
			</div>
			<div id="form_container1">
				<br /> <input type="text" class="form-control"
					placeholder="手机号/用户名" id="login_number" value="admin" /> <input
					type="password" class="form-control" placeholder="密码"
					id="login_password" /> <input type="button" value="登录"
					class="btn btn-success" id="login_btn" /> <span
					id="rememberOrfindPwd"> <span> <input id="remember"
						type="checkbox" style="margin-bottom: -1.5px;" />
				</span> <span style="color: #000000"> 记住密码&emsp;&emsp;&emsp;&emsp; </span>
					<span style="color: #000000"> 忘记密码 </span>
				</span>
			</div>

			<div style="display: block; width: 330px;">
				<span id="lab_type2">使用第三方直接登陆</span>
			</div>
			<div
				style="width: 330px; height: 100px; border-bottom: 1px solid #FFFFFF;">
				<br />
				<button id="login_QQ" type="button" class="btn btn-info">
					<img src="img/qq32.png" style="width: 20px; margin-top: -4px;" />&emsp;QQ登录
				</button>
				<button id="login_WB" type="button" class="btn btn-danger">
					<img src="img/sina32.png" style="width: 20px; margin-top: -4px;" />&emsp;微博登录
				</button>
			</div>
		</div>
		<!-- 会员注册 -->
		<div id='regist_container' style="display: none;">
			<div id="lab1">
				<span id="lab_login">会员注册</span> <span id="lab_toLogin">
					&emsp;已有账号&nbsp; <span id='toLogin'
					style="color: #EB9316; cursor: pointer;">立即登录</span>
				</span>
			</div>
			<div id="form_container2" style="padding-top: 25px;">

				<input type="text" class="form-control" value="admin"
					placeholder="用户名" id="regist_account" /> <input type="password"
					class="form-control" placeholder="密码" id="regist_password1" /> <input
					type="password" class="form-control" placeholder="确认密码"
					id="regist_password2" /> <input type="text" class="form-control"
					placeholder="手机号" id="regist_phone" /> <input type="text"
					class="form-control" placeholder="验证码" id="regist_vcode" />
				<!--<button id="getVCode" type="button" class="btn btn-success" >获取验证码</button>-->
				<input id="getVCode" type="button" class="btn btn-success"
					value="点击发送验证码" onclick="sendCode(this)" />

			</div>
			<input type="button" value="注册" class="btn btn-success"
				id="regist_btn" />
		</div>
	</div>

</body>
<script type="text/javascript">
	var clock = '';
	var nums = 30;
	var btn;
	function sendCode(thisBtn) {
		btn = thisBtn;
		btn.disabled = true; //将按钮置为不可点击
		btn.value = '重新获取（' + nums + '）';
		clock = setInterval(doLoop, 1000); //一秒执行一次
	}

	function doLoop() {
		nums--;
		if (nums > 0) {
			btn.value = '重新获取（' + nums + '）';
		} else {
			clearInterval(clock); //清除js定时器
			btn.disabled = false;
			btn.value = '点击发送验证码';
			nums = 10; //重置时间
		}
	}

	$(document).ready(function() {
		$("#login_QQ").click(function() {
			alert("暂停使用！");
		});
		$("#login_WB").click(function() {
			alert("暂停使用！");
		});
	});
</script>

</html>